<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.tip {
				width: 100px;
				height: 100px;
				border: 1px dotted black;
				position: absolute;
				top: 0;
				left: 0
			}
		</style>
		<script>
			
		 class zhuai{
	   	     construcor(){	   	   	     	   	  
	   	     	 this.div1 = document.getElementById("div1");　　
	   	   }
	   	    show(){ 
	   	    	var x = 0;
	   	    	var y = 0;
				div1.onmousedown = function(ev) {
					var oTip = document.createElement('p');
					oTip.className = 'tip';
					oTip.style.left = x + 'px';
					oTip.style.top = y + 'px';
					document.body.appendChild(oTip);
					var ev = ev || event;
					var disX = ev.clientX - div1.offsetLeft;
					var disY = ev.clientY - div1.offsetTop;
					document.onmousemove = function(ev) {
						var ev = ev || event;
						x = ev.clientX - disX;
						y = ev.clientY - disY;
						oTip.style.left = x + 'px';
						oTip.style.top = y + 'px';
					};
					document.onmouseup = function() {

						div1.style.left = x + 'px';
						div1.style.top = y + 'px';
						document.body.removeChild(oTip);
						document.onmouseup = null;
						document.onmousemove = null;
					};
					return false;
				};
              }
	   	   }
			window.onload = function(){
				var n = new zhuai();
				n.show()
			}
		</script>
	</head>

	<body>
		<div id="div1"></div>
	</body>

</html>